<template>
	<view class="chapter-container">
		<view class="header">
			<text class="back-button" @tap="goBack">←</text> <!-- 返回按钮 -->
			<h2 class="chapter-title">第 {{ chapter.orderNum+1 }} 章: {{ chapter.title }}</h2>
		</view>
		<view class="chapter-content">
			<text class="chapter-main-content" space="emsp">{{ chapter.content }}</text>
		</view>
	</view>
</template>

<script>
	import Cookies from 'js-cookie';
	import config from '@/utils/config.js';
	const token = Cookies.get('token');
	export default {
		data() {
			return {
				chapter: {
					id: '',
					bookId: '',
					title: '',
					content: '',
					orderNum: ''
				}
			};
		},
		onLoad(options) {
			const chapterId = options.chapterId;
			this.getChapter(chapterId);

		},
		methods: {
			goBack() {
				window.history.back();
			},
			getChapter(chapterId) {
				// 从Cookie获取token
				if (!token) {
					uni.hideLoading();
					uni.showToast({
						icon: 'error',
						title: '未获取到有效token，请先登录'
					});
					return;
				}
				uni.request({
					url: `${config.apiBaseUrl}/chapter/show?chapterId=${chapterId}`, // 后端API端点
					header: {
						'Content-Type': 'application/json',
						'token': token
					},
					method: 'GET',
					success: (res) => {
						console.log(res);
						if (res.statusCode === 200 && res.data.code === 1) {
							this.chapter.content = res.data.data.content;
							this.chapter.title = res.data.data.title;
							this.chapter.orderNum = res.data.data.orderNum;
						} else {
							uni.showToast({
								title: `${res.data.msg}`,
								icon: 'snone'
							});
						}
					},
					fail: () => {
						uni.showToast({
							title: '网络请求失败',
							icon: 'none'
						});
					}
				})
			}
		}
	}
</script>

<style scoped>
	.chapter-container {
		position: relative;
		margin: auto;
		height: 100vh;
		overflow-y: hidden;
	}

	.header {
		top: 0;
		background-color: #4a90e2;
		/* 更深的蓝色，带来视觉层次感 */
		padding: 16px;
		height: 4%;
		width: 100%;
		text-align: center;
		box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
		position: relative;
	}

	.back-button {
		position: absolute;
		/* 绝对定位以放置返回按钮 */
		left: 16px;
		/* 左边距 */
		top: 16px;
		/* 顶部边距 */
		font-size: 20px;
		/* 大字号 */
		color: #ffffff;
		/* 白色按钮 */
		cursor: pointer;
		/* 指针效果 */
	}

	.chapter-title {
		font-size: 26px;
		font-weight: bold;
		color: #ffffff;
	}

	.chapter-content {
		background-color: #f9f9f9;
		width: 90%;
		height: 94%;
		position: relative;
		margin: auto;
		left: 0;
		right: 0;
		overflow-y: auto;
	}

	.chapter-main-content {
		font-size: 17px;
		line-height: px;
		margin: auto;
		color: #444;
		background-color: #f9f9f9;
		overflow-wrap: break-word;
		overflow-y: auto;
		text-align: center;
	}
</style>